<template>
  <div class="app-container">
    <span class="text">最近7天客户增长量</span>
    <schart
      :canvasId="canvasId1"
      :type="type"
      :width="width"
      :height="height"
      :data="data1"
      :options="options1"
    ></schart>
    <div>
      <span class="text">按月查看客户增长</span>&nbsp;&nbsp;&nbsp;&nbsp;
      <el-date-picker
        size="small"
        style="width: 200px;"
        class="filter-item"
        v-model="monthSelect"
        type="month"
        placeholder="选择年月"
      ></el-date-picker>
      <el-button
        class="filter-item"
        size="small"
        type="primary"
        v-waves
        icon="el-icon-search"
        v-loading="listLoading1"
        @click="day"
      >搜索</el-button>
    </div>
    <schart
      :canvasId="canvasId2"
      :type="type"
      :width="width"
      :height="height"
      :data="data2"
      :options="options2"
      v-loading="listLoading2"
    ></schart>
    <div>
      <span class="text">按年查看客户增长</span>&nbsp;&nbsp;&nbsp;&nbsp;
      <el-date-picker
        size="small"
        style="width: 200px;"
        class="filter-item"
        v-model="yearSelect"
        type="year"
        placeholder="选择年"
      ></el-date-picker>
      <el-button
        class="filter-item"
        size="small"
        type="primary"
        v-waves
        icon="el-icon-search"
        @click="month"
      >搜索</el-button>
    </div>
    <schart
      :canvasId="canvasId3"
      :type="type"
      :width="width"
      :height="height"
      :data="data3"
      :options="options3"
      v-loading="listLoading3"
    ></schart>
  </div>
</template>
<script>
import baseMixin from "../../mixins/baseMixin";
import Schart from "vue-schart";

export default {
  data() {
    return {
      yearSelect: "",
      monthSelect: "",
      type: "bar",
      width: 1200,
      height: 400,
      canvasId1: "myChart1",
      data1: [],
      options1: {
        title: ""
      },
      canvasId2: "myChart2",
      data2: [],
      options2: {
        title: ""
      },
      canvasId3: "myChart3",
      data3: [],
      options3: {
        title: ""
      }
    };
  },
  components: {
    Schart
  },
  created() {
    this.laster();
    this.day();
    this.month();
  },
  methods: {
    laster() {
      this.listLoading1 = true;
      this.$get("admin/business_report/user_increase/day", {
        range: 1
      }).then(data => {
        this.listLoading1 = false;
        let data_lastest = [];
        data.forEach(el => {
          let arr = {};
          arr.name = el.date;
          arr.value = el.increaseNum;
          data_lastest.push(arr);
        });
        this.data1 = data_lastest;
      }).catch(_ => {
        this.listLoading1 = false;
      });
    },
    day() {
      this.listLoading2 = true;
      this.data2 = [];
      let getDate = new Date();
      let year = getDate.getFullYear();
      let month = getDate.getMonth() + 1;
      if (this.monthSelect !== null &&  this.monthSelect !== ''){
          year = this.dataFormat(this.monthSelect, "yyyy");
          month = this.dataFormat(this.monthSelect, "MM");
        }
      this.$get("admin/business_report/user_increase/day", {
        year: year,
        month: month
      }).then(data => {
        this.listLoading2 = false;
        let i = 0;
        let data_day = [];
        data.forEach(el => {
          let arr = {};
          arr.name = i + 1;
          arr.value = el.increaseNum;
          data_day.push(arr);
          i++;
        });
        this.data2 = data_day;
      }).catch(_ => {
        this.listLoading2 = false;
      });
    },
    month() {
      this.listLoading3 = true;
      this.data3 = [];
      let year = null;
      if (this.yearSelect !== null && this.yearSelect !== "") {
        year = this.dataFormat(this.yearSelect, "yyyy");
      }
      this.$get("admin/business_report/user_increase/month", {
        year: year
      }).then(data => {
        this.listLoading3 = false;
        let data_month = [];
        data.forEach(el => {
          let arr = {};
          arr.name = el.month;
          arr.value = el.increaseNum;
          data_month.push(arr);
        });
        this.data3 = data_month;
      }).catch(_ => {
        this.listLoading3 = false;
      });
    },
    dataFormat(value, fmt) {
      let getDate = new Date(value);
      let o = {
        "M+": getDate.getMonth() + 1,
        "d+": getDate.getDate(),
        "h+": getDate.getHours(),
        "m+": getDate.getMinutes(),
        "s+": getDate.getSeconds(),
        "q+": Math.floor((getDate.getMonth() + 3) / 3),
        S: getDate.getMilliseconds()
      };
      if (/(y+)/.test(fmt)) {
        fmt = fmt.replace(
          RegExp.$1,
          (getDate.getFullYear() + "").substr(4 - RegExp.$1.length)
        );
      }
      for (let k in o) {
        if (new RegExp('(' + k + ')').test(fmt)) {
          fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)))
        }
      }
      return fmt;
    }
  }
};
</script>
<style>
.text {
  font-size: 14px;
  color: #606266;
}
</style>